extends layout
block content
    #app
        p 原始字符串: {{ message }}
        p 计算后反转字符串: {{ reversedMessage }}
        p 使用方法后反转字符串: {{ reversedMessage2() }}
        p {{ site }}
append scripts
    script.
        // 这个有点迷, 以后再整理
        var vm = new Vue({
            el: '#app',
            data: {  // vm.reversedMessage 声明了 getter, 不用显式定义
                message: 'Runoob!',
                name: 'Google',
                url: 'http://www.google.com',
                site: 'google http://www.google.com'
            },
            computed: {  //- computed 基于它的依赖缓存, 只有相关依赖发生改变时才会重新取值, 而使用 methods, 在重新渲染的时候, 函数会重新调用执行
                reversedMessage: function() {  // 提供的函数将用作属性 vm.reversedMessage 的 getter
                    return this.message.split('').reverse().join('')  // `this` 指向 vm 实例
                },  // vm.reversedMessage 依赖于 vm.message, 在 vm.message 发生改变时, vm.reversedMessage 也会更新
                site: {
                    get: function() { return this.name + ' ' + this.url; },  // getter
                    set: function(newValue) {  // setter
                        var names = newValue.split(' ');
                        this.name = names[0];
                        this.url = names[names.length - 1];
                    }
                }
            },
            methods: {  // 可以说使用 computed 性能会更好, 但是如果你不希望缓存, 你可以使用 methods 属性
                reversedMessage2: function() {
                    return this.message.split('').reverse().join('')
                }
            }
        })
        // 调用 setter,  vm.name 和 vm.url 也会被对应更新
        vm.site = '菜鸟教程 http://www.runoob.com';  // setter 会被调用, vm.name 和 vm.url 也会被对应更新
        document.write('name: ' + vm.name);  // Google
        document.write('<br>');
        document.write('url: ' + vm.url);  // http://www.google.com; 并没有变...
